<head>
<style>
	#accordion{
    width: 80%;
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#accordion h3{
    font-size: 12pt;
    margin: 0px;
    padding: 10px;
    background: #ccc;
    border-bottom: 1px solid #fff;
}
#accordion li div.content{
    display: none;
    
    background: #f9f9f9;
    
}
#accordion li:hover div.content{
    display: inherit;
}

</style>
</head>
<script type="text/javascript"><!--//--><![CDATA[//><!--

	var grid_reload = function(){
		$('#datagrid').datagrid('reload', $('#fm_search').serializeObject());
	};

	$(document).ready(function() {
		// Setup Datagrid
		$('#datagrid').datagrid({  
			url:gs_path+'/'+controller+'/getdata', 
			queryParams: $('#fm_search').serializeObject(),
			height:340,
			pagination:true,
			columns:[[
				{ field : 'ck', checkbox:true, width: 40, align: 'center' },				
				{ field : 'nama_jenis_barang', title : 'Jenis Barang', width:200, sortable:true },				
				{ field : 'kd_barang', title : 'Kode Barang', width:100, sortable:true },
				{ field : 'nama_barang', title : 'Nama Barang', width:200, sortable:true },
				{ field : 'kemasan', title : 'Kemasan', width:200, sortable:true },
				{ field : 'isi', title : 'Isi', width:200, sortable:true }				
			]]
		});
		
		$('#filter_app_id').setCombo({ data: <?php echo json_encode($arr_application); ?> });
		
		// Setup Form
		$('#form_master').setupForm([
			{ name: 'kd_jenis_barang', data: <?php echo json_encode($arr_application); ?>, size: 'medium', noempty:true },
			{ name: 'kd_barang', type: 'text', size: 'medium', maxlength: 10, noempty:true },
			{ name: 'nama_barang', type: 'text', size: 'long', maxlength: 100, noempty:true },
			{ name: 'id_kemasan', data: <?php echo json_encode($arr_kemasan); ?>, size: 'medium', noempty:true },
			{ name: 'tgl_barang', type: 'date' },
			{ name: 'kd_vendor', type: 'lov', size: 'short',
				onClearButton:function(){
					$(this).setval(''); 
					$('#nama_vendor').setval(''); 
				},
				onActionButton:function(){ 
					LOVVendor({ onSelect:function(row){ 
						$('#kd_vendor').setval(row.kd_vendor); 
						$('#nama_vendor').setval(row.nama_vendor); 
					} }); 
				}
			},
			{ name: 'nama_vendor', type: 'text', size: '24', readonly:true },
			{ name: 'status_barang'<?php //echo json_encode($arr_kemasan); ?>, size: 'medium', noempty:true },
			//dimensi
			{ name: 'tinggi', type: 'text', size: 'short', maxlength: 100, noempty:false },
			{ name: 'dalam', type: 'text', size: 'short', maxlength: 100, noempty:false },
			{ name: 'lebar', type: 'text', size: 'short', maxlength: 100, noempty:false },
			//kondisi
			{ name: 'cara_beli', type: 'text', size: 'short', maxlength: 100, noempty:false },
			{ name: 'return', type: 'text', size: 'short', maxlength: 100, noempty:false },
			{ name: 'term', type: 'text', size: 'short', maxlength: 100, noempty:false },
			{ name: 'biaya_daftar', type: 'text', size: 'short', maxlength: 100, noempty:false },
			{ name: 'biaya_lain', type: 'text', size: 'short', maxlength: 100, noempty:false },
			{ name: 'total_bayar', type: 'text', size: 'short', maxlength: 100, noempty:false },
			{ name: 'metode_bayar', type: 'text', size: 'short', maxlength: 100, noempty:false },
			{ name: 'disc_pembukaan', type: 'text', size: 'short', maxlength: 100, noempty:false },
			{ name: 'disc_reguler', type: 'text', size: 'short', maxlength: 100, noempty:false },
			{ name: 'disc_promosi', type: 'text', size: 'short', maxlength: 100, noempty:false },
			{ name: 'disc_lain', type: 'text', size: 'short', maxlength: 100, noempty:false },
		]);	
		
		
		// Create Dialog
		$('#dialog_container').dialog({
			closed:true,
			modal:true,
			title: '_',
			width:600,
			height:600,
			buttons:[{
				text:'Save',
				iconCls:'icon-save',
				handler:function(){
					$('#form_master').submitForm('/'+controller+'/ajax_post', { onComplete : function(){ $('#dialog_container').dialog('close'); $('#datagrid').datagrid('reload'); }} );
				}
			},{
				text:'Close',
				iconCls:'icon-cancel',
				handler:function(){
					$('#dialog_container').dialog('close');
				}
			}]
		});
		
		
		// Set Action Button
		var buttons = [ { label: 'Add', icon: 'add', onclick: function() {
							resetError();
							$('#dialog_container').dialog('open');
							$('#form_master').data('mode', 'create');
							$('#form_master').parent().parent().parent().prev().find('.panel-title').html('New Barang');
							$('#kd_barang').readonly(false);
							$('#kd_barang, #nama_barang').val('');
							$('#kd_barang').focus();
						} },
						{ label: 'Edit', icon: 'edit', onclick: function() {
							var oSel=$('#datagrid').datagrid('getSelected'); 
							if(oSel==null){ alert('Please select row!'); }
							else{ 
								resetError();
								$('#dialog_container').dialog('open'); 
								$('#form_master').data('mode', 'edit');
								$('#form_master').parent().parent().parent().prev().find('.panel-title').html('Edit Barang');
								$('#kd_barang').readonly();
								jsonToForm(oSel); $('#nama_barang').focus();
							} 
						} },
						{label: 'Delete', icon: 'delete', onclick: function() { 
							var oSel = $('#datagrid').datagrid('getSelected'); 
							if (oSel == null) { 
								$.messager.alert('&nbsp;', gs_msg_row_unselected, 'warning'); 
							} else { 
								deleteData(['kd_barang']);
							} 
						}}];
		setAction(buttons);
		
		
		$('#fm_search').focusFirst();
	});
//--><!]]></script>

<div id="tb" style="padding:5px;height:auto">
    <div>
        <form id="fm_search" onsubmit="grid_reload(); return false;">
        	<table class="tb_form" style="margin-bottom:0px">
            <tr>
            	<td width="100">Keyword</td>
                <td><input type="text" id="keyword" name="keyword" class="textfield medium" />
                	<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="grid_reload(); return false;">Search</a>
                </td>
            </tr>
            </table>
        </form>
    </div>
</div>
<div id="datagrid" toolbar="#tb"></div>


<div id="dialog_container" style="padding:5px;width:600px;height:250px;">
	<form id="form_master">
	<h2 >Identitas Produk</h2>
    <table class="tb_form" style="width:100%;" cellpadding="0" cellspacing="0">
    <tr>
        <td class="label">Jenis Barang</td>
        <td><input id="kd_jenis_barang" /></td>
    </tr>
    <tr>
    <tr>
        <td class="label" style="width:150px">Kode Barang</td>
        <td><input id="kd_barang" /></td>
    </tr>
    <tr>
        <td class="label" style="width:150px">Nama Barang</td>
        <td><input id="nama_barang" /></td>
    </tr>
    <tr>
        <td class="label">Kemasan</td>
        <td><input id="id_kemasan" /></td>
    </tr>
	<tr>
		<td class="label">Vendor / Supplier</td>
		<td><input id="kd_vendor" /><input id="nama_vendor" /></td>
	</tr>
	<tr>
        <td class="label">Tanggal</td>
        <td><input id="tgl_barang" /></td>
    </tr>
	<tr>
        <td class="label">Status Barang</td>
        <td>
			<select id="status_barang">
				<option value="Baru" selected="selected">Baru</option>
				<option value="Terdaftar">Terdaftar</option>
			</select>
		</td>
    </tr>
    <tr>
    </table>
	<ul id="accordion">
    <li>
        <h3>Dimensi</h3>
        <div class="content">
		<table>
            <tr><td width="168" class="label">Weight / Tinggi (cm)</td>
            <td><input id="tinggi" /></td>
			</tr>
			<tr><td class="label">Width / Lebar(cm)</td>
            <td><input id="lebar" /></td>
			</tr>
			<tr><td class="label">Dept / Dalam(cm)</td>
            <td><input id="dalam" /></td>
			</tr>
			</table>
        </div>
    </li>
    <li>
        <h3>Kondisi</h3>
        <div class="content">
            <table>
            <tr><td width="168" class="label">Cara Pembelian</td>
            <td><input id="cara_beli" /></td>
			</tr>
			<tr><td class="label">Returnable Item</td>
            <td><input id="return" /></td>
			</tr>
			<tr><td class="label">Term Pembayaran</td>
            <td><input id="term" /></td>
			</tr>
			<tr><td class="label">Biaya Pendaftaran</td>
            <td><input id="biaya_daftar" /></td>
			</tr>
			<tr><td class="label">Biaya Lain</td>
            <td><input id="biaya_lain" /></td>
			</tr>
			<tr><td class="label">Total Pembayaran</td>
            <td><input id="total_bayar" /></td>
			</tr>
			<tr><td class="label">Metode Pembayaran</td>
            <td><input id="metode_bayar" /></td>
			</tr>
			<tr><td class="label">Disc Pembukaan</td>
            <td><input id="disc_pembukaan" /></td>
			</tr>
			<tr><td class="label">Disc Reguler</td>
            <td><input id="disc_reguler" /></td>
			</tr>
			<tr><td class="label">Disc Promosi</td>
            <td><input id="disc_promosi" /></td>
			</tr>
			<tr><td class="label">Disc.Lain</td>
            <td><input id="disc_lain" /></td>
			</tr>
			</table>
        </div>
    </li>
    
</ul>
	</form>
</div>